<template>
	<div class="zh-slice-list">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width" style="width: 120px">
						<el-select v-model="listParam.status" filterable>
							<el-option label="全部" :value="-1"></el-option>
							<el-option label="等待切片" :value="3"></el-option>
							<el-option label="切片失败" :value="4"></el-option>
							<el-option label="正常切片" :value="1"></el-option>
						</el-select>
					</div>
					<div class="open-width">
						<el-input v-model="keyword" placeholder="请输入视频名称、切片名称搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="primary" @click="jumpNewCut">新增切片</el-button>
					<el-button type="danger" @click="deleteMuilt_confirm">批量删除</el-button>
				</div>
			</div>
			<div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
				<el-table :data="listData" border @selection-change="tableSelectionChange" max-height="567" style="width: 100%">
					<el-table-column type="selection" width="50" align="center" fixed>
					</el-table-column>
					<el-table-column prop="imgPath" label="预览图" align="center" width="160" show-overflow-tooltip>
						<template slot-scope="scope">
							<img :src="BASE_URL + scope.row.cut_image" alt="" style="display: inherit;width: 100%;height: 88px">
						</template>
					</el-table-column>
					<el-table-column prop="video_name" label="原始视频名称	" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="cut_name" label="切片名称" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="video_start_time" label="开始时间" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="video_end_time" label="结束时间" align="center" show-overflow-tooltip>
					</el-table-column>
					<!--  <el-table-column
				      prop="is_micro"
				      label="是否微课"
				      align="center"
				      show-overflow-tooltip
				      >
				      <template slot-scope="scope">
				      	  <div v-html="getMirco(scope.row.is_micro)"></div>
				      	</template>
				    </el-table-column> -->
					<!-- <el-table-column
				      prop="4"
				      label="切片类型"
				      align="center"
				      show-overflow-tooltip
				      >
				      	<template slot-scope="scope">
				      	  <div v-html="getType(scope.row.is_virtual)"></div>
				      	</template>
				    </el-table-column> -->
					<el-table-column prop="comment" label="备注" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="" label="状态" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<span :class="scope.row.status == '切片失败' ? 'delete-button' : ''">{{ scope.row.status }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="5" label="操作" align="center" width="200" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-button v-if="scope.row.status == '正常切片'" @click="editBox(scope.row)" type="text">编辑</el-button>
							<el-button v-if="scope.row.status == '正常切片'" @click="videoView(scope.row)" type="text">预览</el-button>
							<el-button v-if="scope.row.is_virtual === 0 && scope.row.status == '正常切片'" @click="down(scope.row)"
								type="text">下载</el-button>
							<el-button @click="delete_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]"
						:page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button @click="getList" type="primary" icon="el-icon-refresh" circle title="刷新数据" size="mini">
						</el-button>
					</div>
				</div>
			</div>
		</div>

		<transition name="el-fade-in-linear">
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>切片预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<!-- <videoAlertView v-if="showVideoPlayer" :playParam.sync="playParam"></videoAlertView> -->
						<dplayer v-if="showVideoPlayer" :playParam.sync="playParam"></dplayer>
					</div>
				</div>
			</div>
		</transition>

		<el-dialog title="视频切片编辑" :visible.sync="editVisible" :close-on-click-modal="false" :close-on-press-escape="false"
			width="540px">
			<div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="切片名称" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="切片备注" prop="desc">
						<el-input type="textarea" resize="none" :rows="2" maxLength="20" v-model="ruleForm.comment">
						</el-input>
						<span style="position: absolute;bottom: 0;right: 8px;">{{ ruleForm.comment.length }} / 20</span>
					</el-form-item>
					<!-- <el-form-item label="推送微课" prop="region">
						<el-select v-model="ruleForm.is_micro" filterable placeholder="请选择活动区域">
							<el-option label="是" value="1"></el-option>
							<el-option label="否" value="0"></el-option>
						</el-select>
					</el-form-item> -->
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
// import videoAlertView from '../../public/videoAlertView';
import dplayer from "@/components/public/dplayer.vue";

export default {
	data() {
		return {
			loading: {
				status: false,
				txt: '获取数据...',
			},
			listData: [],
			listParam: {
				status: -1,
				keyword: '',
				page_index: 1,
				page_size: 10,
			},
			keyword: '',
			selected: [],
			total_number: 0,
			cutType: { 0: '物理切片', 1: '虚拟切片' },
			isMirco: { 0: '否', 1: '是' },
			isActive: true,
			editVisible: false,
			ruleForm: {
				name: '',
				comment: ''
			},
			rules: {
				name: [
					{ required: true, message: '请输入切片名称', trigger: 'blur' },
					{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
				],
			},
			showVideoPlayer: false,
			playParam: { play_url: '', type: 'application/x-mpegURL' },
			rowLen: 0,
		}
	},
	created() {
		this.getList();
		this.timer = setInterval(() => {
			this.getList();
		}, 10000);
	},
	beforeRouteLeave(to, from, next) {
		clearInterval(this.timer);
		next(true);
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	watch: {
		editVisible() {
			if (this.editVisible === false)
				this.$refs.ruleForm.resetFields()
		}
	},
	methods: {
		searchFunc() {
			this.listParam.keyword = this.keyword;
			this.listParam.page_index = 1;
			this.getList();
		},
		reset() {
			this.keyword = '';
			this.listParam = {
				status: -1,
				keyword: '',
				page_index: 1,
				page_size: 10,
			}
			this.getList();
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.editCut();
				} else {
					return false;
				}
			});
		},
		editBox(obj) {

			this.ruleForm.id = obj.cut_id;
			this.ruleForm.name = obj.cut_name;
			this.ruleForm.comment = obj.comment;
			this.ruleForm.is_micro = obj.is_micro.toString();
			this.editVisible = true;
		},
		editCut() {
			let success = (data => {
				this.getList();
				this.editVisible = false;
				this.$message.success(data.msg);
			})
			this.$ajax.put('api/video/video_cut', this.ruleForm, { func: { success: success } })
		},
		jumpNewCut(row) {
			this.$router.push('/resources/video/new-cut')
		},
		viewClose() {
			this.showVideoPlayer = false;
			this.isActive = true

		},
		videoView(obj) {
			this.playParam.play_url = obj.pc_play_cut_url;
			if (obj.is_virtual === 1) {
				this.playParam.start_time = obj.start_time;
				this.playParam.end_time = obj.end_time;
			} else {
				this.playParam.start_time = null;
				this.playParam.end_time = null;
			}
			this.showVideoPlayer = true;
			this.isActive = false
		},

		getType(val) {
			return this.cutType[parseInt(val)]
		},
		getMirco(val) {
			return this.isMirco[parseInt(val)]
		},
		getList() {
			let success = (data => {
				this.listData = data.data.data;
				this.total_number = data.data.data_sum;
			})
			let fail = (data => {
				this.$message.error(data.msg)
			})
			//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
			this.$ajax.get('api/video/video_cut_list', { params: this.listParam, func: { success: success, fail: fail } })
		},
		//选中
		tableSelectionChange(val) {
			this.selected = val;
		},
		handleSizeChange(val) {
			this.listParam.page_index = 1;
			this.listParam.page_size = val;
			this.getList()
		},
		handleCurrentChange(val) {
			this.listParam.page_index = val;
			this.getList();
		},
		delete(id) {
			let success = (data => {
				this.$message.success(data.msg);

				if (this.listData.length - this.rowLen === 0) {
					if (this.listParam.page_index > 1) {
						this.listParam.page_index--;
					} else {
						this.listParam.page_index = 1;
					}
				}

				this.getList();
			});
			this.$ajax.delete('api/video/video_cut', { params: { id: id }, func: { success: success } })
		},
		delete_confirm(obj) {
			let yes = (data => {
				this.rowLen = 1;
				this.delete(obj.cut_id);
			})
			let cancel = (data => { })
			this.e_confirm({ yes: yes, cancel: cancel, txt: '确定将 ' + obj.cut_name + ' 删除吗？' });

		},
		deleteMuilt_confirm() {
			if (this.selected.length === 0) {
				this.$message.warning("请选择要删除的项");
				return false;
			}
			let yes = (data => {
				this.rowLen = 1;
				this.muilDelete();
			})
			let cancel = (data => { })
			this.e_confirm({ yes: yes, cancel: cancel, txt: '确定要删除选中的项吗？' });

		},
		muilDelete() {
			var ids = [];
			for (var i = this.selected.length - 1; i >= 0; i--) {
				ids.push(this.selected[i].cut_id)
			}
			this.delete(ids);
		},
		down(obj) {
			var form = document.createElement("form");
			form.action = this.BASE_URL + '/index/resource/download_cut'
			form.method = "post"
			form.style.display = "none";

			var opt_path = document.createElement("textarea");
			opt_path.name = 'path';
			opt_path.value = obj.cut_mp4_path;
			form.appendChild(opt_path);
			var opt_name = document.createElement("textarea");
			opt_name.name = 'name';
			opt_name.value = obj.cut_name;
			form.appendChild(opt_name);

			document.body.appendChild(form);
			form.submit();
			document.body.removeChild(form);
		},
	},
	components: {
		// videoAlertView
		dplayer,
	}
}
</script>
<style lang="scss">
.zh-slice-list {
	.masking {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		// height: 100%;
		transition: .5s;
		background: rgba(0, 0, 0, .3);
		z-index: 4;

		.maskingBox {
			position: absolute;
			top: 20%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}

		.masking_h {
			padding: 10px 15px;
			background: #348EFC;
			text-align: center;
			text-align-last: justify;

			>span,
			>i {
				font-size: 16px;
				text-align-last: initial;
				display: inline-block;
				vertical-align: middle;
				color: #fff;
			}

			>i {
				cursor: pointer;
			}
		}

		.masking_c {
			padding: 15px;
			height: 450px;
		}

	}

	.activeLive {
		opacity: 0;
		visibility: hidden;
	}
}
</style>